import classNames from "classnames";
import ReactMarkdown from "react-markdown";
import remarkGfm from "remark-gfm";
import "./Comment.css";

export default function CommentContainer({
  liked,
  replyLikeId,
  treaded,
  replyTreadId,
  content,
  setContent,
  inputRef,
  commentCount,
  commentlist,
  handleTabChange,
  handlPublish,
  type,
  tabs,
  user,
  avatar,
  handleReplyLike,
  handleReplyTread,
  replyId,
  isComponentVisible,
  handleReply,
  handleMore,
  showMore,
  replyMoreId,
  handleReplyDelete,
  handleReplyReport,
  handleMouseLeave,
}) {
  return (
    <div className="comment_container">
      <div className="reply-navigation">
        <ul className="nav-bar">
          <li className="nav-title">
            <span className="nav-title-text">评论</span>
            <span className="total-reply">{commentCount}</span>
          </li>
          <li className="nav-sort">
            {tabs.map((item) => (
              <span
                key={item.type}
                onClick={() => handleTabChange(item.type)}
                className={classNames("nav-item", {
                  active: type === item.type,
                })}
              >
                {item.text}
              </span>
            ))}
          </li>
        </ul>
      </div>

      <div className="reply-wrap">
        <div className="box-normal">
          <div className="reply-box-avatar">
            <div className="bili-avatar">
                <img
                  className="bili-avatar-img"
                  src={avatar}
                  alt="用户头像"
                />
            </div>
          </div>
          <div className="reply-box-wrap">
            <textarea
              className="reply-box-textarea"
              placeholder="发一条友善的评论"
              ref={inputRef}
              value={content}
              onChange={(e) => setContent(e.target.value)}
            />
            <div className="reply-box-send">
              <div
                className="send-text"
                onClick={handlPublish}
                disabled={!content.trim()}
              >
                发布
              </div>
            </div>
          </div>
        </div>
        <div className="reply-list">
          {commentlist.map((item) => (
            <div key={item.rpid} className="reply-item">
              <div className="root-reply-avatar">
                <div className="bili-avatar">
                  <img
                    className="bili-avatar-img"
                    alt=""
                    src={item.user.avatar}
                  />
                </div>
              </div>
              <div className="content-wrap">
                <div className="user-info">
                    <div className="user">
                      <span className="user-name">{item.user.uname}</span>
                    </div>
                    <div className="reply">
                     <span className="reply-time">{item.ctime}</span>
                    </div>
                </div>
                <div className="root-reply">
                  <span className="reply-content">
                    <ReactMarkdown remarkPlugins={[remarkGfm]}>
                      {item.content}
                    </ReactMarkdown>
                  </span>
                  <div className="reply-info">
                    <div className={`like ${liked && item.rpid === replyLikeId ? "liked" : ""}`} onClick={() => handleReplyLike(item.rpid)}></div>{item.like}
                    <div className={`tread ${treaded && item.rpid === replyTreadId ? "treaded" : ""}`} onClick={() => handleReplyTread(item.rpid)}></div>
                    <div className="reply" onClick={()=>handleReply(item.rpid)}></div>
                    <div className="more" onClick={()=>handleMore(item.rpid)}></div>
                           {showMore && item.rpid === replyMoreId && (
                            <div className="popup" onMouseLeave={handleMouseLeave}>
                             {user.uid === item.user.uid ? (
                               <div className="delete" onClick={() => handleReplyDelete(item.rpid)}>删除</div>
                                ) : (
                              <div className="report" onClick={() => handleReplyReport(item.rpid)}>举报</div>
                             )}
                           </div>
                            )}
                    </div>
                  </div>

              {isComponentVisible&&item.rpid===replyId&&(<div className="reply">
                    <div className="box-normal">
                     <div className="reply-box-avatar">
                      <div className="bili-avatar">
                        <img
                           className="bili-avatar-img"
                           src={avatar}
                           alt="用户头像"
                        />
                     </div>
                  </div>
                     <div className="reply-box-wrap">
                      <textarea
                          className="reply-box-textarea"
                          placeholder="发一条友善的评论"
                          ref={inputRef}
                          value={content}
                          onChange={(e) => setContent(e.target.value)}
                      />
                    <div className="reply-box-send">
                     <div
                        className="send-text"
                        onClick={handlPublish}
                        disabled={!content.trim()}
                       >
                       发布
                    </div>
                  </div>
                </div>
              </div>
              </div>)}
            </div>
          </div>
          ))}
        </div>
      </div>
    </div>
  );
}
